{% extends "base.html" %}

{% block title %}系统内容管理 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold text-primary mb-8">系统内容管理</h1>

  <!-- 标签页导航 -->
  <div class="mb-6 border-b border-gray-200">
    <nav class="-mb-px flex space-x-8">
      <button onclick="switchTab('site-settings')" 
              class="tab-btn border-b-2 border-primary text-primary py-4 px-1 text-sm font-medium"
              data-tab="site-settings">
        <i class="fa fa-cog mr-2"></i>网站设置
      </button>
      <button onclick="switchTab('banners')" 
              class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium"
              data-tab="banners">
        <i class="fa fa-image mr-2"></i>轮播图管理
      </button>
      <button onclick="switchTab('about')" 
              class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-4 px-1 text-sm font-medium"
              data-tab="about">
        <i class="fa fa-info-circle mr-2"></i>关于我们
      </button>
    </nav>
  </div>

  <!-- 网站基本设置 -->
  <div id="site-settings-tab" class="tab-content">
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">网站基本设置</h2>
      
      <form method="POST" action="{{ url_for('admin.update_site_settings') }}" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="site_name" class="block text-sm font-medium text-gray-700 mb-2">网站名称</label>
            <input type="text" id="site_name" name="site_name" 
                   value="{{ site_settings.site_name if site_settings else '风之宿' }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="contact_phone" class="block text-sm font-medium text-gray-700 mb-2">联系电话</label>
            <input type="text" id="contact_phone" name="contact_phone" 
                   value="{{ site_settings.contact_phone if site_settings else '' }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="contact_email" class="block text-sm font-medium text-gray-700 mb-2">联系邮箱</label>
            <input type="email" id="contact_email" name="contact_email" 
                   value="{{ site_settings.contact_email if site_settings else '' }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 mb-2">联系地址</label>
            <input type="text" id="address" name="address" 
                   value="{{ site_settings.address if site_settings else '' }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
        </div>

        <div>
          <label for="site_description" class="block text-sm font-medium text-gray-700 mb-2">网站描述</label>
          <textarea id="site_description" name="site_description" rows="4"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">{{ site_settings.site_description if site_settings else '' }}</textarea>
        </div>

        <div class="flex justify-end">
          <button type="submit" 
                  class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors">
            <i class="fa fa-save mr-2"></i>保存设置
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 轮播图管理 -->
  <div id="banners-tab" class="tab-content hidden">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">添加轮播图</h2>
      
      <form method="POST" action="{{ url_for('admin.add_banner') }}" enctype="multipart/form-data" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="banner_title" class="block text-sm font-medium text-gray-700 mb-2">标题</label>
            <input type="text" id="banner_title" name="title" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="banner_image" class="block text-sm font-medium text-gray-700 mb-2">图片 *</label>
            <input type="file" id="banner_image" name="image" accept="image/*" required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="link_url" class="block text-sm font-medium text-gray-700 mb-2">链接地址（选填）</label>
            <input type="url" id="link_url" name="link_url"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>

          <div>
            <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-2">排序</label>
            <input type="number" id="sort_order" name="sort_order" value="0"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
          </div>
        </div>

        <div class="flex items-center">
          <input type="checkbox" id="is_active" name="is_active" value="1" checked
                 class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
          <label for="is_active" class="ml-2 text-sm text-gray-700">启用</label>
        </div>

        <div class="flex justify-end">
          <button type="submit" 
                  class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors">
            <i class="fa fa-plus mr-2"></i>添加轮播图
          </button>
        </div>
      </form>
    </div>

    <!-- 轮播图列表 -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">轮播图列表</h2>
      
      {% if banners %}
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for banner in banners %}
        <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
          <img src="{{ url_for('static', filename='uploads/' + banner.image_url) }}" 
               alt="{{ banner.title }}"
               class="w-full h-48 object-cover">
          <div class="p-4">
            <h3 class="font-semibold text-gray-800 mb-2">{{ banner.title }}</h3>
            <p class="text-sm text-gray-600 mb-2">排序: {{ banner.sort_order }}</p>
            <p class="text-sm mb-3">
              <span class="px-2 py-1 rounded text-xs {{ 'bg-green-100 text-green-800' if banner.is_active else 'bg-gray-100 text-gray-800' }}">
                {{ '已启用' if banner.is_active else '已禁用' }}
              </span>
            </p>
            <form method="POST" action="{{ url_for('admin.delete_banner', banner_id=banner.id) }}" 
                  onsubmit="return confirm('确定要删除这个轮播图吗？');">
              <button type="submit" 
                      class="w-full bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors text-sm">
                <i class="fa fa-trash mr-2"></i>删除
              </button>
            </form>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-gray-500 text-center py-8">暂无轮播图</p>
      {% endif %}
    </div>
  </div>

  <!-- 关于我们内容 -->
  <div id="about-tab" class="tab-content hidden">
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">关于我们内容</h2>
      
      <form method="POST" action="{{ url_for('admin.update_about_content') }}" class="space-y-6">
        <div>
          <label for="about_title" class="block text-sm font-medium text-gray-700 mb-2">标题</label>
          <input type="text" id="about_title" name="about_title" 
                 value="{{ about_content.title if about_content else '关于风之宿' }}"
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
        </div>

        <div>
          <label for="about_content" class="block text-sm font-medium text-gray-700 mb-2">内容</label>
          <textarea id="about_content" name="about_content" rows="12"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">{{ about_content.content if about_content else '' }}</textarea>
          <p class="mt-2 text-sm text-gray-500">支持HTML格式</p>
        </div>

        <div class="flex justify-end">
          <button type="submit" 
                  class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors">
            <i class="fa fa-save mr-2"></i>保存内容
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function switchTab(tabName) {
  // 隐藏所有标签内容
  document.querySelectorAll('.tab-content').forEach(tab => {
    tab.classList.add('hidden');
  });
  
  // 移除所有标签按钮的激活状态
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.classList.remove('border-primary', 'text-primary');
    btn.classList.add('border-transparent', 'text-gray-500');
  });
  
  // 显示选中的标签内容
  document.getElementById(tabName + '-tab').classList.remove('hidden');
  
  // 激活选中的标签按钮
  const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
  activeBtn.classList.remove('border-transparent', 'text-gray-500');
  activeBtn.classList.add('border-primary', 'text-primary');
}
</script>
{% endblock %}
